;(function () {
    // 获取WEB存储 
    let city_name = localStorage.getItem('city_name') || '请手动选择'
    $('.city .choose-city').html(city_name)
    // 切换城市移入显示
    $('.area .change-city').mouseover(function () {
        $('.area .box').show()
    })
    // 切换城市移出隐藏
    $('.area').mouseleave(function () {
        $('.area .box').hide()
    })
    // 标题特效
    $('.tab li').click(function () {
        let index = $(this).index()
        // 标题
        $(this).siblings().removeClass('cur')
        $(this).addClass('cur')
        // 内容
        $('.tab-content').hide()
        $('.tab-content').eq(index).show()
    })
    // 内容特效
    $('.tab-content').on('click', 'a', function () {
        // 数据
        let title = $(this).text()
        let index = $(this).parents('.tab-content').index()
        // 当前选中
        $('.tab-content')
            .eq(index - 1)
            .find('.city')
            .removeClass('cur')
        $(this).parents('.city').addClass('cur')
        // 标题
        $('.tab li')
            .eq(index - 1)
            .text(title)
        if (index == 3) return
        $('.tab li').removeClass('cur')
        $('.tab li').eq(index).addClass('cur')
        // 下一个显示
        $('.tab li').eq(index).show()
        $('.tab-content')
            .eq(index - 1)
            .hide()
        $('.tab-content').eq(index).show()
    })
    // 内容选中
    $('.tab-content').on('click', 'span', function () {
        let title = $(this).prev().text()
        let areaId = $(this).parents('.city').attr('area-id')
        $('.area .box').hide()
    })
    // 选择存储
    $('.tab-content').on('click', 'span', function () {
        let title = $(this).prev().text()
        let areaId = $(this).parents('.city').attr('area-id')
        localStorage.setItem('city_name', title)
        localStorage.setItem('city_id', areaId)
        // $('.city .choose-city').html(title)
        location.reload()
    })
        // 省份管理
    // 发送异步请求，一级省份数据
    $.get('/api/area/index.jsp',{
        type:'一级',
        pid:1
      },res=>{
        // console.log(res);
        // 将数据填充到一级菜单中。
        let html = ``
        $.each(res.data,(index,item)=>{
          html+=`
          <div class="city" area-id="${item.area_id}"><a href="javascript:;">${item.area_name}</a><span>-</span></div>
          `
        })
        $('.tab-content:eq(0)').html(html)
      },'json')
    // 后续城市管理
    // 事件委托
      $('.area .tab-content').on('click','a',function(){
        // 判断点击的是几级菜单
        let index = $(this).parents('.tab-content').index()
        // 判断是三级菜单退出函数
        if([1,2].indexOf(index)==-1) return
        // 获取异步请求所需数据type，pid
        let type = ['一级','二级'][index-1] 
        let pid = $(this).parents('.city').attr('area-id')
        // 发送异步请求
        $.get('/api/area/index.jsp',{type,pid},res=>{
          // 获取数据，遍历，将数据拼接填充到对应的菜单中。
          let html = ``
          $.each(res.data,(index,item)=>{
            html+=`
            <div class="city" area-id="${item.area_id}"><a href="javascript:;">${item.area_name}</a><span>-</span></div>
            `
          })
          $(`.tab-content:eq(${index})`).html(html)
        },'json')
      })



})()
